<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../event.drag/jquery.event.drag.js" type="text/javascript"></script>
<title>jquery.event.drag</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css" media="screen">
.box {
	position: absolute;
	height: 98px;
	width: 98px;
	background: #CCF;
	border: 1px solid #AAD;
	cursor: move;
	}
#container {
	height: 300px;
	border: 1px dashed #BBB;
	}
</style>

<script type="text/javascript">
jQuery(function($){
	var $div = $('#container');			
	$('#dragdemo').bind("dragstart drag",{},function( ev, dd ){
		if ( ev.type == "dragstart" )
			$.extend( ev.data, $div.offset(), {
				width: $div.outerWidth() - $( this ).outerWidth(),
				height: $div.outerHeight() - $( this ).outerHeight(),
				})
		else $( this ).css({ 
			top: Math.min( 
				Math.max( ev.data.top, dd.offsetY ), 
				ev.data.top + ev.data.height
				),
			left: Math.min( 
				Math.max( ev.data.left, dd.offsetX ), 
				ev.data.left + ev.data.width 
				)
			});	
		});
	});
</script>

<h2>event.drag / contain</h2>

<div id="container">
	<div class="box" id="dragdemo"></div>	
	</div>

</body></html>